<!DOCTYPE html>
<!-- 多功能页面 -->
<!-- author: 冀彤璐 -->
<!-- 2020/4/29 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link href="css/ufun.css" type="text/css" rel="stylesheet" />
		<script src="js/lib/jquery-3.4.1.min.js"></script>
		<script src="js/tools.js"></script>
		<script src="js/jump.js"></script>
		<script src="js/common.js"></script>
		<style type="text/css">
			html {
				background-color: transparent;
			}

			#Bg {
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				opacity: 0;
				transition: opacity 0.3s;
				background-color: rgba(0, 0, 0, 0.3);
			}

			#Bg.done-window {
				opacity: 1;
			}

			#PopWindow {
				background-color: var(--color-white);
				width: 100%;
				bottom: 0px;
				margin-bottom: -100%;
				position: fixed;
			}

			@keyframes pop-window-done {
				0% {
					margin-bottom: -100%;
				}
			}

			@keyframes pop-window-close {
				0% {
					margin-bottom: 0;
				}
			}

			#PopWindow.done-window {
				animation: pop-window-done;
				animation-duration: 300ms;
				margin-bottom: 0;
			}

			#PopWindow.close-window {
				animation: pop-window-close;
				animation-duration: 300ms;
				margin-bottom: -100%;
			}

			.head {
				padding-top: 4vw;
				height: 10vw;
				text-align: center;
				align-content: center;
			}

			.head p {
				color: var(--color-gray-medium);
				width: 80%;
				text-align: center;
				align-items: center;
				margin: 2vw auto;
				font-size: 4vw;
			}

			.share-section {
				display: flex;
				flex-wrap: wrap;
				padding: 5vw;
			}

			.img-container {
				width: 14vw;
				height: 14vw;
				background: var(--color-gray-dark);
				border-radius: 20vw;
				margin: 1vw auto;
				
			}

			#platform-container {
				align-items: center;
				justify-content: center;
				text-align: center;
				width: 20vw;
				margin-right: 1.6vw;
				flex: 0 0 25%;
			}

			#platform-name {
				text-align: center;
				font-size: 3.5vw;
				color: var(--color-gray-light);
			}

			.icon-container {
				width: 14vw;
				height: 14vw;
			}

			#WeChat-img,
			#PyqImg,
			#QqImg,
			#QzoneImg,
			#WeiBoImg {
				width: 8vw;
				margin: 2.8vw auto;

			}

			#WeChat-img-container {
				background-color: #20C300;
			}

			#PYQ-img-container {
				background-color: #4cd900;
			}

			#QQ-img-container {
				background-color: #77c5ee;
			}

			#QZone-img-container {
				background-color: #e1ab3e;
			}

			#WeiBo-img-container {
				background-color: #de9144;
			}

			#divider {
				height: 1px;
				background-color: var(--color-gray-light);
			}

			.action-section {
				display: flex;
				justify-content: flex-start;
				padding: 5vw;
			}

			.action-container {
				display: none;
				align-items: center;
				justify-content: center;
				text-align: center;
				width: 20vw;
				margin-right: 1.6vw;
				flex: 0 0 25%;
			}

			#action-icon {
				width: 14vw;
				height: 14vw;
				background: var(--color-white);
				-moz-border-radius: 20vw;
				-webkit-border-radius: 20vw;
				border-radius: 20vw;
				margin: 0 auto;
				box-sizing: border-box;
				border: 1px solid var(--color-gray-dark);
				text-align: center;
			}

			#action-name {
				text-align: center;
				margin: 1vw;
				font-size: 3.5vw;
				color: var(--color-gray-dark);
			}

			.material-icons {
				color: var(--color-gray-dark);
				font-size: 8vw;
				display: flex;
				justify-content: center;
				height: calc(14vw - 2px);
				align-items: center;
			}

			#Cancel {
				height: 16vw;
				display: flex;
				justify-content: center;
				align-items: center;
				color: var(--color-gray-dark);
			}
		</style>
	</head>
	<body>
		<div id="Bg"></div>
		<!-- 整体的背景区域 -->
		<div id="PopWindow">
			<!-- 头部标题 -->
			<div class="head">
				<p>文章分享</p>
			</div>
			<!-- 分享部分 -->
			<div class="share-section">
				<!-- 整个图标+文字的区域 -->
				<div id="platform-container" onclick="shareWeiXin()">
					<div class="img-container" id="WeChat-img-container">
						<div class="icon-container">
							<img id="WeChat-img" src="img/wechat.svg">
						</div>
					</div>

					<p id="platform-name">微信</p>
				</div>

				<!-- 整个图标+文字的区域 -->
				<div id="platform-container" onclick="shareQQ()">
					<div class="img-container" id="PYQ-img-container">
						<div class="icon-container">
							<img id="QqImg" src="img/qq.svg">
						</div>
					</div>
					<p id="platform-name">QQ</p>
				</div>

				<!-- 整个图标+文字的区域 -->
				<!-- <div id="platform-container">
					<div class="img-container" id="QQ-img-container">
						<div class="icon-container">
							<img id="WeiBoImg" src="img/weibo.svg">
						</div>
					</div>
					<p id="platform-name">新浪微博</p>
				</div> -->

				<!-- 整个图标+文字的区域 -->
				<!-- 整个图标+文字的区域 -->
				<!-- <div id="platform-container">
					<div class="img-container" id="WeiBo-img-container">
						<div class="icon-container">
							<img id="WeiBoImg" src="img/weibo.svg">
						</div>
					</div>
					<p id="platform-name">微博</p>
				</div> -->
			</div>

			<!-- 分割线 -->
			<!-- <div id="divider"></div> -->

			<!-- 操作部分 -->
			<div class="action-section">
				<!-- 整个图标+文字的区域 -->
				<div id="editEssay" class="action-container" onclick="doEdit();">
					<div id="action-icon">
						<span class="material-icons">edit</span>
					</div>
					<p id="action-name">编辑</p>
				</div>

				<!-- 整个图标+文字的区域 -->
				<div id="deleteEssay" class="action-container" onclick="doRemove();">
					<div id="action-icon">
						<span class="material-icons">delete_outline</span>
					</div>
					<p id="action-name">删除</p>
				</div>

				<!-- 整个图标+文字的区域 -->
				<div id="reportEssay" class="action-container" onclick="doReport();">
					<div id="action-icon">
						<span class="material-icons">block</span>
					</div>
					<p id="action-name">举报</p>
				</div>
			</div>

			<!-- 分割线 -->
			<div id="divider"></div>

			<!-- 取消按键 -->
			<div id="Cancel">
				取消
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var current;
		var essayType;
		var essayId;
		var isAuthor;
		var shareHref;
		var shareValue= {
			href: "https://yulekeji.cn/",
			title: "",
			content: ""
		};
		var shareThumbLoc = './img/hanshu.png';
		var shares = null;
		var sweixin = null;
		var sqq = null;
		var buttons = [{
				title: '我的好友',
				extra: {
					scene: 'WXSceneSession'
				}
			},
			{
				title: '朋友圈',
				extra: {
					scene: 'WXSceneTimeline'
				}
			},
			{
				title: '我的收藏',
				extra: {
					scene: 'WXSceneFavorite'
				}
			}
		];

		/*3个功能的类名*/
		var editEssay = $('#editEssay');
		var deleteEssay = $('#deleteEssay');
		var reportEssay = $('#reportEssay');

		document.addEventListener('plusready', function() {
			GetStatusTop();
			updateSerivces();
			current = plus.webview.currentWebview();
			essayType = current.entityType;
			essayId = current.entityId;
			shareValue['title'] = current.entityTitle;
			shareValue['content'] = current.entityContent;
			isAuthor = current.isAuthor;
			if( essayType == 0){
				shareHref = "https://yulekeji.cn/hanshu/question.html?id=" + essayId;
			}
			else{
				shareHref = "https://yulekeji.cn/hanshu/lecture.html?id=" + essayId;
			}
			shareValue['href'] = shareHref;
			if (isAuthor == true) {
				editEssay.css('display', 'block');
				deleteEssay.css('display', 'block');
			} else {
				reportEssay.css('display', 'block');
			}
			$('#PopWindow, #Bg').addClass('done-window');
			DoShow(current);
		});
		

		$('#Bg, #Cancel').click(function() {
			ClosePopWindow();
		});

		function doEdit() {
			current.opener().evalJS('edit()');
			ClosePopWindow();
		}

		function doRemove() {
			plus.nativeUI.confirm('您确定要删除吗? ', function(e) { // callback
				if (e.index == 0) {
					current.opener().evalJS('remove()');
					ClosePopWindow();
				}
			}, {
				"title": '删除',
				"buttons": ["确认", "取消"],
			});
		}

		function doReport() {
			JumpToReport({
				"entityType": essayType,
				"entityId": essayId,
			});
			ClosePopWindow();
		}

		function ClosePopWindow() {
			$('#PopWindow, #Bg').removeClass('done-window');
			$('#PopWindow, #Bg').addClass('close-window');
			setTimeout(function() {
				plus.webview.currentWebview().close();
			}, 200);
		}

		//分享
		function updateSerivces() {
			plus.share.getServices(function(s) {
				shares = {};
				for (var i in s) {
					var t = s[i];
					shares[t.id] = t;
				}
				sweixin = shares['weixin'];
				sqq = shares['qq'];
			}, function(e) {});
		}

		function shareWeiXin() {
			var msg = {
				type: 'web',
				thumbs: [shareThumbLoc],
				href: shareValue['href'],
				title: shareValue['title'],
				content: shareValue['content']
			};	
			console.log(JSON.stringify(msg));
			sweixin ? plus.nativeUI.actionSheet({
				title: '分享网页到微信',
				cancel: '取消',
				buttons: buttons
			}, function(e) {
				(e.index > 0) && share(sweixin, msg, buttons[e.index - 1]);
			}) : plus.nativeUI.alert('当前环境不支持微信分享操作!');
		}

		function shareQQ() {
			var msg = {
				type: 'text',
				thumbs: [shareThumbLoc],
				media: shareValue['href'],
				title: shareValue['title'],
				content: shareValue['content'],
				href: shareValue['href']
			};
			console.log(JSON.stringify(msg));
			console.log(JSON.stringify(shareValue));
			sqq ? share(sqq, msg) : plus.nativeUI.alert('当前环境不支持QQ分享操作!');
		}

		function share(srv, msg, button) {
			if (!srv) {
				return;
			}
			button && (msg.extra = button.extra);
			// 发送分享
			if (srv.authenticated) {
				doShare(srv, msg);
			} else {
				srv.authorize(function() {
					doShare(srv, msg);
				}, function(e) {});
			}
		}
		// 发送分享
		function doShare(srv, msg) {
			srv.send(msg, function() {}, function(e) {});
		}
	</script>
</html>
